这是一款支持Vue3的富文本编辑器GitHub地址：https://github.com/vueup/vue-quill/VueQuill官网：https://vueup.github.io/vue-quill/
// 查看 @vueup/vue-quill 版本npm view @vueup/vue-quill versions --json// 导入 @vueup/vue-quill 依赖包npm i @vueup/vue-quill@1.0.0一、首先实现父页面【index.vue】
设置内容 获取内容 {{editorContent }} import QuillEditor from './components/quillEditor'export default { name: 'QuillEditorComponent', components: {QuillEditor }, data () {return { // 编辑器内容 editorContent: ''} }, methods: {/** * 设置编辑器内容 */async handleSetContentClick(evt) { this.$elementUtil.handleElButtonBlur(evt) const refs = await this.$refs.quillEditorRef; const status = await refs.handleSetHtml('你好世界！') console.log('handleSetContentClick =>', status)},/** * 获取编辑器内容 */async handleGetContentClick(evt) { this.$elementUtil.handleElButtonBlur(evt) const refs = await this.$refs.quillEditorRef; this.editorContent = await refs.handleGetHtml(); console.log('handleGetContentClick =>', this.editorContent)}, }}二、然后设计子组件【quillEditor.vue】
import {QuillEditor } from '@vueup/vue-quill'import '@vueup/vue-quill/dist/vue-quill.snow.css'export default { components: {QuillEditor }, data () {return { // 编辑器内容 content: '', // 编辑器选项 options: {debug: 'info',modules: { toolbar: ['bold', 'italic', 'underline']},placeholder: '请输入内容~',readOnly: false,theme: 'snow' }} }, methods: {/** * 设置编辑器 Text 内容 */async handleSetText(content) { const refs = await this.$refs refs.quill.setText(content) return 'OK'},/** * 获取编辑器 Text 内容 */async handleGetText() { const refs = await this.$refs return refs.quill.getText();},/** * 设置编辑器 Html 代码 */async handleSetHtml(content) { const refs = await this.$refs refs.quill.setHTML(content) return 'OK'},/** * 获取编辑器 Html 代码 */async handleGetHtml() { const refs = await this.$refs return refs.quill.getHTML();} }}三、效果如下 ~
